<template>
  <div>
    <div v-if="seniortype">
      <div v-if="patent_list.length <= 0">
        <el-main class="left">
          <div class="boxWidth">
            <div class="title">
              <div>{{ seniortype ? "高级检索" : "普通检索" }}</div>
              <div>
                <el-button
                  style="
                    display: block;
                    background-color: #106bf3;
                    border-color: #33bf92;
                    border-radius: 10px;
                  "
                  @click="SearchType"
                  type="primary"
                  >切换至{{ seniorName }}</el-button
                >
              </div>
            </div>
            <el-row :gutter="12">
              <el-col :span="24" style="margin-bottom: 20px">
                <el-col :xl="9" :lg="8">
                  <el-select
                    @change="changs"
                    v-model="leng[0].select"
                    style="width: 100%"
                    placeholder="主要字段"
                  >
                    <el-option
                      v-for="item in data.fields"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :xl="15" :lg="16">
                  <el-input
                    @input="changInpnut(0)"
                    v-model="leng[0].input"
                    placeholder="可输入关键词，公司名称或者专利号"
                  ></el-input>
                </el-col>
              </el-col>
              <el-col
                v-for="(len, index) in num"
                :key="index"
                :span="24"
                style="margin-bottom: 20px"
              >
                <el-col :xl="3" :lg="3">
                  <el-select
                    @change="changs2"
                    v-model="leng[index + 1].name"
                    placeholder="AND"
                  >
                    <el-option
                      v-for="item in data.exp"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :xl="6" :lg="5">
                  <el-select
                    @change="changs3"
                    v-model="leng[index + 1].select"
                    style="width: 100%"
                    placeholder="[全字段]申请(专利权)人"
                  >
                    <el-option
                      v-for="item in data.fields"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :xl="15" :lg="16">
                  <el-input
                    @input="changInpnut2(index + 1)"
                    v-model="leng[index + 1].input"
                    placeholder="例如：华为OR中心"
                  >
                  </el-input>
                </el-col>
              </el-col>
              <el-col :span="24" style="margin-bottom: 20px">
                <el-col :xl="6" :lg="6">
                  <el-button
                    v-if="num < 9"
                    @click="addNum"
                    style="width: 100%; background-color: #f2f3f5"
                    >+添加字段</el-button
                  >
                </el-col>
              </el-col>
              <el-col :span="24" style="margin-bottom: 20px">
                <el-col :xl="24" :lg="24">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="在上方字段中输入检索词，在此处预览您的检索式"
                    v-model="exp"
                  >
                  </el-input>
                </el-col>
              </el-col>
              <el-col style="margin-bottom: 20px">
                <el-col :span="4" style="margin-bottom: 50px">
                  <el-select v-model="lssc" placeholder="请选择当前权利状态" clearable>
                    <el-option
                      v-for="item in lsscOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-col>

                <el-col :span="4">
                  <el-select v-model="pdt" placeholder="请选择专利类型" clearable>
                    <el-option
                      v-for="item in pdtOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-col>
              </el-col>
              <el-col :span="24" style="margin-bottom: 20px">
                <el-col :xl="5" :lg="12">
                  <el-button
                    @click="emty"
                    style="width: 100px; background-color: #909cb2; color: #fff"
                    >清空</el-button
                  >
                  <el-button
                    @click="Clickexpers"
                    style="width: 100px; background-color: #45a321; color: #fff"
                    >搜索
                  </el-button>
                </el-col>
              </el-col>
            </el-row>
          </div>
        </el-main>
      </div>
      <el-main v-else class="ListBox">
        <el-row :gutter="24">
          <el-col :span="3" style="margin-bottom: 20px">
            <el-select
              v-model="lssc"
              placeholder="请选择当前权利状态"
              @change="Clickexpers"
              clearable
            >
              <el-option
                v-for="item in lsscOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="3">
            <el-select
              v-model="pdt"
              placeholder="请选择专利类型"
              @change="Clickexpers"
              clearable
            >
              <el-option
                v-for="item in pdtOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="3">
            <el-select
              v-model="sort_column"
              placeholder="请选择排序"
              @change="Clickexpers"
              clearable
            >
              <el-option
                v-for="item in columnOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="3">
            <el-button type="primary" @click="Deleteres">返回搜索</el-button>
          </el-col>
        </el-row>
        <el-table @row-click="rowClick" :data="patent_list" border>
          <el-table-column prop="ano" align="center" width="150" label="缩略图">
            <template slot-scope="scope">
              <div style="display: flex; justify-content: center">
                <img
                  v-if="scope.row.imgo != '暂无数据'"
                  :src="scope.row.imgo"
                  alt=""
                  style="width: 100px; height: 100px; margin-right: 10px"
                />
                <div v-else>{{ scope.row.imgo }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="pns" align="center" label="公开(公告)号" width="180">
          </el-table-column>
          <el-table-column prop="tic" align="center" label="专利标题" width="180">
          </el-table-column>
          <el-table-column align="center" label="当前权利状态">
            <template slot-scope="scope">
              <el-tag
                style="border: none"
                size="small"
                effect="dark"
                color="#3F7FEF"
                v-if="scope.row.status == '有效'"
                >{{ scope.row.status }}</el-tag
              >
              <el-tag
                style="border: none"
                size="small"
                effect="dark"
                color="#F7B219"
                v-if="scope.row.status == '在审'"
                >{{ scope.row.status }}</el-tag
              >
              <el-tag
                style="border: none"
                size="small"
                effect="dark"
                color="#33BF92"
                v-if="scope.row.status == '无效'"
                >{{ scope.row.status }}</el-tag
              >
              <!--  <el-tag style="border:none;"  size="small" effect="dark" color="#4ba22f" v-if="scope.row.status == '部分无效'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#4ba22f" v-if="scope.row.status == '权利恢复'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '未缴年费'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '撤回'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '驳回'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '期限届满'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '避重授权'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '全部撤销'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#da7b21" v-if="scope.row.status == '实质审查'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#da7b21" v-if="scope.row.status == '公开'" >{{scope.row.status}}</el-tag>
              <el-tag style="height:25px;line-height:25px; margin-right:5px;margin-bottom:5px;" size="small" v-for="(t,s) in scope.row.event" :key="s" v-if="scope.row.event.length > 0" effect="plain" type="">{{t}}</el-tag> -->
            </template>
          </el-table-column>
          <el-table-column prop="pdt" align="center" label="专利类型"> </el-table-column>
          <el-table-column prop="inc" align="center" label="发明人"> </el-table-column>
          <el-table-column prop="ad" align="center" label="申请日"> </el-table-column>
          <el-table-column prop="pd" align="center" label="公告(公开)日">
          </el-table-column>
          <el-table-column prop="ano" align="center" label="申请号"> </el-table-column>
          <el-table-column prop="crc" align="center" label="代理机构"> </el-table-column>
        </el-table>
        <div class="pagination" style="width: 90%; margin: 40px auto">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="list.page"
            :page-size="list.size"
            layout="total, prev, pager, next, jumper"
            :total="Number(parseInt(list.total))"
            align="left"
          ></el-pagination>
        </div>
      </el-main>
    </div>
    <div v-else>
      <el-main class="left" >
        <div class="boxWidth">
          <div class="title">
            <div>{{ seniortype ? "高级检索" : "普通检索" }}</div>
            <div>
              <el-button
                style="
                  display: block;
                  background-color: #106bf3;
                  border-color: #33bf92;
                  border-radius: 10px;
                "
                @click="SearchType"
                type="primary"
                >切换至{{ seniorName }}</el-button
              >
            </div>
          </div>

          <div>
            <el-input
              v-model="inputVal"
              @keyup.enter.native="searchIntelligences"
              placeholder="可输入关键词进行检索"
              autocomplete="on"
              class="input-with-select"
            >
              <template #prepend>
                <div class="selectBoxNew">专利检索</div>
              </template>
              <template #append>
                <el-button icon="el-icon-search" @click="searchIntelligences" />
              </template>
            </el-input>
          </div>
        </div>
      </el-main>
    </div>
    <Service v-if="this.$route.meta.serve" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { fields, expression, getExpression } from "@/api/user";
import Service from "@/components/Service";
export default {
  components: {
    Service,
  },
  data() {
    return {
      inputVal: "",
      seniorName: "高级检索",
      seniortype: false,
      data: [],
      num: 3,
      leng: [
        {
          name: "AND",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
      ],
      lssc: "",
      lsscOptions: [
        { value: "1", label: "有效" },
        { value: "2", label: "无效" },
        { value: "3", label: "在审" },
        { value: "8", label: "不影响" },
        { value: "9", label: "不确定/待定" },
      ],
      pdt: "",
      pdtOptions: [
        { value: "发明", label: "发明" },
        { value: "实用新型", label: "实用新型" },
        { value: "外观设计", label: "外观设计" },
      ],
      columnOptions: [
        { value: "-AD", label: "申请日从新到旧" },
        { value: "+AD", label: "申请日从旧到新" },
        { value: "-PD", label: "公开日从新到旧" },
        { value: "+PD", label: "公开日从旧到新" },
      ],
      input: "",
      textarea: "",
      check: "",
      sort_column: "-AD",
      exp: sessionStorage.getItem("exp") ? sessionStorage.getItem("exp") : "",
      patent_list: [],
      patent_list2: [],
      list: [],
      page: sessionStorage.getItem("list_page")
        ? Number(sessionStorage.getItem("list_page"))
        : 1,
    };
  },
  computed: {
    ...mapGetters(["sidebar"]),
    isCollapse() {
      return !this.sidebar.opened;
    },
  },
  async mounted() {
    try {
      this.data = await fields();
      if (this.exp !== "") {
        this.handleCurrentChange(this.page);
      }

      this.leng = sessionStorage.getItem("leng")
        ? JSON.parse(sessionStorage.getItem("leng"))
        : this.leng;
      // console.log(this.data, JSON.parse(sessionStorage.getItem('leng')));
    } catch (e) {
      this.$message.error(e.message);
    }
  },
  methods: {
    searchIntelligences() {
      this.$router.push({ path: "/shundeSearchNew", query: { val: this.inputVal } });
    },
    SearchType() {
      this.seniortype = !this.seniortype;
      if (this.seniortype) {
        this.seniorName = "普通检索";
      } else {
        this.seniorName = "高级检索";
      }
    },
    emty() {
      this.exp = "";
      this.lssc = "";
      this.pdt = "";
      this.sort_column = "";
      this.leng = [
        {
          name: "AND",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
      ];
    },
    async changs(val) {
      try {
        const res = await getExpression({ field: this.leng });
        this.exp = res.text;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async changs2(val) {
      try {
        const res = await getExpression({ field: this.leng });
        this.exp = res.text;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async changs3(val) {
      try {
        const res = await getExpression({ field: this.leng });
        this.exp = res.text;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async changInpnut(index) {
      try {
        if (this.leng[index].select) {
          const res = await getExpression({ field: this.leng });
          this.exp = res.text;
        }
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async changInpnut2(index) {
      try {
        if (this.leng[index + 1]) {
          const res = await getExpression({ field: this.leng });
          this.exp = res.text;
        }
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    addNum() {
      this.num++;
    },
    Deleteres() {
      this.patent_list = "";
      this.list = "";
    },
    async Clickexpers() {
      try {
        // exp
        if (this.exp) {
          const res = await expression({
            exp: this.exp,
            lssc: this.lssc,
            pdt: this.pdt,
            sort_column: this.sort_column,
          });
          // console.log(res, 'res')
          if (res == "") {
            throw new Error("暂无数据");
          } else {
            this.patent_list = res.patent_list;
            this.list = res.page;
            if (res.page.total >= 10000) {
              this.list.total = 10000;
            }
          }
        } else {
          throw new Error("请填写检索词");
        }
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    rowClick(row) {
      sessionStorage.setItem("pc", 1);
      sessionStorage.setItem("Shundepc", 1);
      sessionStorage.setItem("leng", JSON.stringify(this.leng));
      sessionStorage.setItem("exp", this.exp);
      // sessionStorage.setItem("list", JSon.stringify(this.list))
      sessionStorage.setItem("list_page", this.page);
      // console.log(row, this.list)
      this.$router.push({
        path: "/detail",
        query: { pid: row.pid, ano: row.ano },
      });
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        const res = await expression({
          page: size,
          exp: this.exp,
          lssc: this.lssc,
          pdt: this.pdt,
          sort_column: this.sort_column,
        });
        if (res == "") {
          throw new Error("暂无数据");
        } else {
          this.patent_list = res.patent_list;
          this.list = res.page;
          if (res.page.total >= 10000) {
            this.list.total = 10000;
          }
        }
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        const res = await expression({
          page: currentPage,
          exp: this.exp,
          lssc: this.lssc,
          pdt: this.pdt,
          sort_column: this.sort_column,
        });
        if (res == "") {
          throw new Error("暂无数据");
        } else {
          this.patent_list = res.patent_list;
          this.list = res.page;
          this.page = currentPage;
          if (res.page.total >= 10000) {
            this.list.total = 10000;
          }
        }
      } catch (e) {
        this.$message.error(e.message);
      }
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .el-input-group {
  height: 74px;
  box-shadow: 0px 11px 35px 0px rgba(216, 222, 232, 0.38);
  border: 1px solid #dcdfe6;

  .el-input-group__prepend {
    background-color: #f5f7fa;
    border: 1px solid #dcdfe6 !important;
    font-size: 24px;
    color:#909399 !important;
    // box-shadow: 1px 0 0 0 '#dcdfe' inset,0 1px 0 0 '#dcdfe' inset,0 -1px 0 0 '#dcdfe' inset;
  }

  .el-input__wrapper {
    // box-shadow: 0 1px 0 0 '#dcdfe' inset, 0 -1px 0 0 '#dcdfe' inset, 1px 0 0 0 '#dcdfe' inset;
  }

  .el-input__inner {
    font-size: 18px;
    height: 74px;
    border: 0px solid #dcdfe6;

    // color: $auxiliaryColor;
    // opacity: 0.5;
    font-family: alibabapuhuitiRegular;
  }

  .el-input-group__append {
    background-color: #fff;
    border: 0px solid #dcdfe6;
    padding: 0;

    .el-button {
      background-color: #0F75B8;
      color: #fff;
      height: 54px;
      width: 102px;
      margin: 0 11px;
      font-size: 33px;
    }
  }
}
.boxWidth {
  width: 1200px;
  min-height: 800px;
}
.title {
  font-size: 75px;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: #202225;
  margin: 48px 0;
  display: flex;
  justify-content: space-between;
}
.left {
  // padding-left: 400px;
  display: flex;
  justify-content: center;
}
.el-main {
  margin: 0;
}
.ListBox {
  padding: 40px 200px;
}

.navbar {
  width: 100%;
  box-shadow: none;
}

.sidebar-logo-container {
  width: 20%;
}

// .el-col-24 {
//   margin-bottom: 20px;
// }

@media (max-width: 1360px) {
}

@media (max-width: 750px) {
  .v_span2 {
    display: block;
  }

  .mb_zy {
    margin-bottom: 10px !important;
  }

  .NavItem,
  .Header,
  .service {
    display: none;
  }

  .main-top {
    width: 100%;
    margin-left: 0 !important;
    padding-bottom: 0;
    top: 0;
  }

  .pc {
    display: none;
  }

  .mb {
    display: block;
  }

  .detail_info_title {
    margin: 15px 0;
  }

  .detail_info_last {
    margin: 15px 0;
  }

  .infos {
    margin: 10px 0 0 0;
  }

  .detail_info {
    margin-bottom: 30px;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    width: 100%;
  }

  .detail_info_first_box {
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
  }

  .detail_head_title {
    width: auto;
  }

  .img-box {
    width: 100%;
  }

  .abst__layout-row {
    flex-direction: column;
  }

  .mb_top {
    margin-top: 20px;
  }

  .mb_context {
    font-weight: bold;
    margin-bottom: 10px;
    width: 100% !important;
  }

  .v_span2 {
    padding-left: 0;
  }

  .tio {
    line-height: 1.3;
  }

  .icon-tog {
    text-align: center;
    display: inline-block;
    line-height: 46px;
  }

  .icon-toggle {
    font-size: 25px !important;
  }

  .title_pns {
    border-bottom: 1px solid #c8d0dc;
    padding-bottom: 10px;
  }

  .transition-box {
    position: fixed;
    right: 0;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .el-zoom-in-top {
    position: fixed;
    width: 80%;
    height: 100%;
    margin: 0 auto;
    background-color: #fff;
    top: 0;
    right: 0;
    z-index: 10;
  }

  .mb_nav_li {
    margin: 30px auto;
  }

  .mb_nav_li li {
    margin-top: 20px;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
  }

  .close {
    float: right;
    padding: 10px;

    .iconfont {
      font-size: 25px;
    }
  }
}
</style>
